<template>
  <div class="screen overview page-content">
    <screen-header :title="banner.name" :is-home="false"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="17" class="ibox-group">
          <div class="ibox box1-1 bgh2">
              <div class="ibox-body text-center" style="padding-top: 1.5vh;">
                <img src="../assets/images/chart-images/resv1_1.png" alt="">
              </div>
            </div>
            <div class="ibox box1-2 bgh">
              <div class="ibox-header">
                <span class="ibox-title">今日预约时段监控</span>
              </div>
              <div class="ibox-body text-center">
                <img src="../assets/images/chart-images/resv1_2.png" style="margin-top: -1vh;" alt="">
              </div>
            </div>
          <div class="fx-box">
            <div class="ibox box1-3" style="margin-right: 2vh;width: 35%;">
              <div class="ibox-header">
                <span class="ibox-title">消费群体分析</span>
              </div>
              <div class="ibox-body text-center">
                <img src="../assets/images/chart-images/resv1_3.png" alt="">
              </div>
            </div>
            <div class="ibox box1-4 fx-1">
              <div class="ibox-header">
                <span class="ibox-title">实时预约任务</span>
              </div>
              <div class="ibox-body">
                <img src="../assets/images/chart-images/resv1_4.png" alt="">
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7" class="ibox-group">
          <div class="ibox box2-1">
            <div class="ibox-header">
              <span class="ibox-title">商品类型销售占比</span>
            </div>
            <div class="ibox-body text-center" style="padding-top: 2vh;">
              <img src="../assets/images/chart-images/resv2_1.png" alt="">
            </div>
          </div>
          <div class="ibox box2-2">
            <div class="ibox-header">
              <span class="ibox-title">用户地域分析</span>
            </div>
            <div class="ibox-body text-center">
              <img src="../assets/images/chart-images/resv2_2.png" alt="">
            </div>
          </div>
          <div class="ibox box2-3">
            <div class="ibox-header">
              <span class="ibox-title">订单数据</span>
            </div>
            <div class="ibox-body">
              <img src="../assets/images/chart-images/resv2_3.png" alt="">
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      overData: {},
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        this.overData = {};
        this.initData();
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    turnPage(index, name) {
      this.$emit("change", index);
    },
    initData() {

    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .box1-1 {
    height: 15vh;
  }

  .box1-2 {
    height: 42.5vh;
  }

  .box1-3 {
    height: 28.5vh;
  }

  .box1-4 {
    height: 28.5vh;
  }

  .box2-1 {
    height: 28.5vh;
  }

  .box2-2 {
    height: 28.5vh;
  }

  .box2-3 {
    height: 28.5vh;
  }
}
</style>